@use './button' as *;

/* CLASS 覆盖 **************************************************************** */
// 基础弹窗
.ant-cover__Modal,
.ant-modal-wrap.ant-cover__Modal:not([class*='ant-modal-confirm']) {
  --_modal-height: ;
  --_min-modal-height: var(--min-modal-height, 200px);
  --_max-modal-height: var(--max-modal-height, var(--dfvh));

  .ant-modal {
    padding: 0;
    max-width: calc(100vw - 16px);
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    padding: 0;
    height: var(--_modal-height);
    min-height: var(--_min-modal-height);
    max-height: calc(var(--dfvh) - 16px);
    max-height: calc(min(var(--_max-modal-height), var(--dfvh)) - 16px);
    border-radius: 16px;
    background-color: theme('colors.sys.layer.d');
  }

  .ant-modal-close {
    top: 18px;
    color: #fff;

    &::after {
      content: '';
      position: absolute;
      inset: -3px;
    }

    .ant-modal-close-x {
      line-height: 1;
    }
  }

  .ant-modal-header {
    margin: 0;
    padding: 16px 20px;
    border-radius: 16px 16px 0 0;
    background-color: transparent;

    @media bp-lt-mobile {
      padding: 16px 12px;
    }

    .ant-modal-title {
      font-size: 18px;
    }
  }

  .ant-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 14px 0 20px;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    margin-bottom: 16px;

    @media bp-lt-mobile {
      padding: 0 6px 0 12px;
    }

    @media (hover: none) {
      padding: 0 20px;
      scrollbar-gutter: auto;

      @media bp-lt-mobile {
        padding: 0 12px;
      }
    }
  }

  .ant-modal-footer {
    display: flex;
    margin: -16px auto 0;
    padding: 16px 20px;
    width: 100%;
    max-width: 400px;

    @media bp-lt-mobile {
      padding: 16px 12px;
    }

    .ant-btn {
      height: 40px;
      font-size: 14px;
    }

    .ant-btn-default {
      @extend .ant-cover__Button-3d-gray;
      flex: 1;
    }

    .ant-btn-primary {
      @extend .ant-cover__Button-3d-primary;
      flex: 1;
    }
  }
}

// 大屏 Modal 样式，小屏 Drawer 样式
.ant-modal-wrap.ant-cover__Modal-drawer:not([class*='ant-modal-confirm']) {
  @extend .ant-cover__Modal;

  @media bp-lt-mobile {
    .ant-modal {
      position: absolute;
      top: auto;
      bottom: 0;
      transform: translate(-50%, 0);
      height: fit-content;
      max-width: 100vw;

      &.ant-zoom-enter.ant-zoom-enter-active {
        animation-name: rise;

        @keyframes rise {
          from {
            transform: translate(-50%, 100%);
            opacity: 1;
          }
          to {
            transform: translate(-50%, 0);
            opacity: 1;
          }
        }
      }

      &.ant-zoom-leave.ant-zoom-leave-active {
        animation-name: fall;

        @keyframes fall {
          from {
            transform: translate(-50%, 0);
            opacity: 1;
          }
          to {
            transform: translate(-50%, 100%);
            opacity: 1;
          }
        }
      }
    }

    .ant-modal-content {
      border-radius: 20px 20px 0 0;
      padding-bottom: 5px;
      height: var(--_modal-height);
      max-height: var(--_max-modal-height);

      // @supports selector(:has(div)) {
      //   &:has(input[type='text']),
      //   &:has(input[type='password']),
      //   &:has(input[type='number']),
      //   &:has(input[type='email']),
      //   &:has(textarea) {
      //     min-height: calc(var(--dfvh) - 52px);
      //   }
      // }

      // @supports not selector(:has(div)) {
      //   min-height: calc(var(--dfvh) - 52px);
      // }
    }

    &.__screen-drawer .ant-modal-content {
      border-radius: 0;
      height: var(--dfvh);
      max-height: none;
    }
  }
}

// .ant-modal-wrap.ant-cover__Modal-has-navigation {
//   .ant-modal-content {
//     overflow: clip;
//   }
//   .ant-modal-body {
//     padding: 0 !important;
//     margin-bottom: 0 !important;
//   }

//   .nav-header {
//     font-size: 18px;
//     font-weight: 600;

//     @media bp-mobile {
//       padding: 20px 0;
//     }
//   }

//   .tt-nav-manager {
//     padding: 0;
//     pointer-events: auto;
//     height: 90vh;
//     max-height: none;

//     .nav-header {
//       background-color: #26272e;
//       padding: 16px 20px;
//     }

//     .scroll-container {
//       padding: 0 20px;
//     }
//   }
// }

// 确认弹窗
.ant-modal-confirm.ant-cover__confirm-modal {
  width: 340px !important;

  .ant-modal-content {
    padding: 20px 18px;
  }

  .ant-modal-confirm-body {
    flex-direction: column;
    justify-content: center;

    > .anticon {
      justify-self: center;
      margin: -52px 0 20px !important;
      font-size: 60px;
    }

    > .ant-modal-confirm-title {
      text-align: center;
    }

    > .ant-modal-confirm-content {
      margin: 12px 0 16px 0 !important;
      text-align: center;
    }
  }

  .ant-modal-confirm-btns {
    display: flex;

    .ant-btn {
      --shadow-offset: 1.5;

      display: block;
      flex: 1;
      height: 40px;
      font-size: 16px;
    }

    .ant-btn-default {
      @extend .ant-cover__Button-3d-gray;
    }

    .ant-btn-primary {
      @extend .ant-cover__Button-3d-primary;
    }
  }
}

/* 全局覆盖 ***************************************************************** */
.ant-modal.ant-modal {
  .ant-modal-close-x {
    line-height: 1em;
  }

  .ant-modal-content {
    background-color: theme('colors.sys.layer.d');
  }

  .ant-zoom-leave-active {
    overflow: hidden;
  }
}

// 当弹窗在动画过程中时，隐藏弹窗滚动条
.ant-modal-wrap:has(.ant-modal:is(.ant-zoom-enter, .ant-zoom-leave)) {
  overflow: hidden;
}
